<template>
  <div class="event-enter">
    <el-card>
      <div class="top-search" v-has-permi="['event:enter:query']">
        <el-form :model="searchConfig" label-width="auto" :inline="true">
          <el-form-item label="事件标题">
            <el-input v-model="searchConfig.title" placeholder="请输入" @keydown.enter="getList"> </el-input>
          </el-form-item>
          <el-form-item label="发生时间">
            <el-date-picker v-model="searchConfig.time" type="daterange" range-separator="到" start-placeholder="开始时间" end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>

          <el-form-item v-if="unfoldFlag" label="登记人名称">
            <el-input v-model="searchConfig.registerName" placeholder="请输入" @keydown.enter="getList"> </el-input>
          </el-form-item>
          <el-form-item v-if="unfoldFlag" label="发生地点">
            <el-input v-model="searchConfig.occurPlace" placeholder="请输入" @keydown.enter="getList"> </el-input>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" @click="getList">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
            <el-button @click="unfoldForm" plain>
              {{ !unfoldFlag ? '展开' : '收起' }}
              <el-icon class="el-icon--right">
                <ArrowDown v-if="!unfoldFlag" />
                <ArrowUp v-else />
              </el-icon>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-top">
        <el-button v-has-permi="['event:enter:add']" type="primary" @click="handler_add">增加</el-button>
        <el-button v-has-permi="['event:enter:edit']" type="success" @click="handler_edit">编辑</el-button>
        <el-button v-has-permi="['event:enter:delete']" type="danger" @click="handler_del">删除</el-button>
      </div>
      <div class="table-content">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column property="title" label="事件标题" show-overflow-tooltip />
          <el-table-column property="registerName" label="登记人" />
          <el-table-column property="declarerName" label="申报人" />
          <el-table-column width="180" property="occurTime" label="发生时间"> </el-table-column>
          <el-table-column property="occurPlace" label="发生地点"> </el-table-column>
          <el-table-column property="eventDetail" label="事件描述"> </el-table-column>
          <el-table-column property="impactLevel" label="事件影响度">
            <template #default="scope"> {{ impactLevel[scope.row.impactLevel] }} </template>
          </el-table-column>
          <el-table-column property="eventLevel" label="事件优先级">
            <template #default="scope"> {{ eventLevel[scope.row.eventLevel] }} </template>
          </el-table-column>
          <!-- <el-table-column property="eventTypeId" label="事件分类id" /> -->
          <!-- <el-table-column property="assersId" label="关联资产id" /> -->
          <!-- <el-table-column property="pictureUrl" label="图片地址" /> -->
          <el-table-column property="resolveStatus" label="事件状态">
            <template #default="scope"> {{ resolveStatus[scope.row.resolveStatus] }} </template>
          </el-table-column>
          <el-table-column property="solveName" label="认领人" />
          <el-table-column property="" label="操作">
            <template #default="scope">
              <div>
                <el-button v-has-permi="['event:enter:detail']" plain size="small" @click="handler_view(scope.row)">查看 {{ scope.row.name }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>

    <!-- 添加抽屉 -->
    <el-drawer v-model="drawerFlag" :title="drawerTitle" direction="rtl" size="40%" :close-on-click-modal="false">
      <Drawer ref="drawerRef" :getList="getList" :closeDrawerFlag="closeDrawerFlag" :rowId="rowId" :isView="isView" />
    </el-drawer>

    <!-- 详情抽屉 -->
    <el-drawer v-model="detaildrawerFlag" :title="'详情'" direction="rtl" size="70%" :close-on-click-modal="true">
      <el-descriptions title="事件录入信息：">
        <el-descriptions-item label="标题：">{{detailInfo?.title || '-' }}</el-descriptions-item>
        <el-descriptions-item label="申报人：">{{detailInfo?.registerName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发生时间：">{{detailInfo?.occurTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="发生地点：">{{detailInfo?.occurPlace || '-' }}</el-descriptions-item>
        <el-descriptions-item label="事件描述：">{{detailInfo?.eventDetail || '-' }}</el-descriptions-item>
      </el-descriptions>

      <el-descriptions title="事件处理信息：">
        <el-descriptions-item label="事件影响度：">{{ impactLevel[detailInfo?.impactLevel]  || '-' }} </el-descriptions-item>
        <el-descriptions-item label="事件优先级：">{{ eventLevel[detailInfo?.eventLevel]  || '-' }} </el-descriptions-item>
        <el-descriptions-item label="关联资产名称：">{{detailInfo?.assersName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="事件状态：">{{ resolveStatus[detailInfo?.resolveStatus]  || '-' }}</el-descriptions-item>
        <el-descriptions-item label="认领人：">{{detailInfo?.solveName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="协作解决人：">{{detailInfo?.cooperationName || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处理时间：">{{detailInfo?.disposeTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="完成时间：">{{detailInfo?.finishTime || '-' }}</el-descriptions-item>
        <el-descriptions-item label="解决方案：">{{detailInfo?.solvePlan || '-' }}</el-descriptions-item>
        <el-descriptions-item label="处理进度：">{{  solveLevel[detailInfo?.solveLevel]  || '-' }}</el-descriptions-item>
        <el-descriptions-item label="事件分类名称：">{{detailInfo?.eventTypeName || '-' }}</el-descriptions-item>
      </el-descriptions>
      <el-descriptions title="配件更换信息：">
        <el-descriptions-item label="更换配件：" v-if="detailInfo?.parts==1"> {{ detailInfo?.parts==1?'不更换':'-' }} </el-descriptions-item>
        <el-descriptions-item label="更换配件：" v-if="detailInfo?.parts==0">
          <el-table :data="detailInfo?.partsList" style="width: 100%" border>
            <el-table-column prop="partsName" label="备件名称："> </el-table-column>
            <el-table-column prop="partsId" label="备件号："> </el-table-column>
            <el-table-column prop="partsNumber" label="备件序列号："> </el-table-column>
            <el-table-column prop="newPartsNumber" label="新件序列号："> </el-table-column>
          </el-table>
        </el-descriptions-item>
      </el-descriptions>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs } from 'vue';
import { ElTable } from 'element-plus';
import Drawer from './Drawer.vue';
import {eventEnterList ,eventEnterDelete ,eventEnterDetail} from '@/api/event'
import {dataType ,impactLevel ,eventLevel,resolveStatus ,solveLevel} from './config'

const searchConfig = ref({
  title: '',
  time: '',
  registerName: '',
  occurPlace: ''
});

const total = ref(1);
const data = reactive<dataType>({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  unfoldFlag: false,
  drawerFlag: false,
  drawerTitle: '',
  tableData:[],
  rowId:"",//选中数据的id
  isView:false,//是否是查看
  detaildrawerFlag:false,
});

const drawerRef = ref()
const { queryParams, unfoldFlag, drawerFlag, drawerTitle ,tableData,rowId ,isView ,detaildrawerFlag} = toRefs(data);

// 添加
const handler_add = () => {
  rowId.value = null
  drawerFlag.value = true;
  isView.value = false
  nextTick(()=>{
    drawerRef.value?.resetForm()
  })

};
/*
修改
*/
const handler_edit = ()=>{
  if(multipleSelection.value&&multipleSelection.value.length!==1){
    ElMessage.error('请选择一条数据')
    return false
  }
  rowId.value = multipleSelection.value[0].id
  drawerFlag.value = true;
  isView.value = false
  nextTick(()=>{
    drawerRef.value?.resetForm()

  })
}
/* 查看 */
const handler_view = async(row)=>{
  rowId.value  = row.id
  // drawerFlag.value = true;
await  getDetail(row.id)
  detaildrawerFlag.value = true
  isView.value = true
}
/* 删除 */
const handler_del =async()=>{
  if(multipleSelection.value&&multipleSelection.value.length===0){
    ElMessage.error('请至少选择一条数据')
    return false
  }

  ElMessageBox.confirm(
    '确认要删除吗',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async() => {
      const arr = multipleSelection.value.map((item:any)=>item.id)
      console.log(arr);
      const res = await eventEnterDelete(arr)
      console.log(res);
      if(res.code===200){
        ElMessage.success('删除成功')
      await  getList()
      }


    })
    .catch(() => {

    })

}

// 展开
const unfoldForm = () => {
  unfoldFlag.value = !unfoldFlag.value;
};

/* 表格选中 */
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<any>([]);
const handleSelectionChange = (val: any) => {
  console.log(val);

  multipleSelection.value = val;
};


/* 重置搜索表单 */
const resetSearch = async()=>{
  searchConfig.value.title=''
  searchConfig.value.time=''
  searchConfig.value.registerName=''
  searchConfig.value.occurPlace=''
  await getList()
}




const detailInfo = ref()
const getDetail = async(id)=>{
const res = await eventEnterDetail({id})
console.log(res);
detailInfo.value = res.data

}

const getList = async() => {
  console.log('getList');
  const {title,time,registerName,occurPlace} = searchConfig.value

  console.log(time);


  const res  = await eventEnterList({...queryParams.value,title,registerName,occurPlace,beginTime:time[0],endTime:time[1]})
  console.log(res);
  if(res){
    tableData.value = res.rows
    total.value = res.total
  }
};
const closeDrawerFlag = ()=>{
drawerFlag.value = false
}
getList()
</script>

<style scoped lang="scss">
.event-enter {
  padding: 8px;
  width: 100%;
  height: 100%;

  .el-card {
    width: 100%;
    height: 100%;

    .table-top {
      margin-bottom: 20px;
    }

    .table-content {
      width: 100%;
    }
  }
}
</style>
